<template>
	<view class="wrapper bg-linear" style="height: 95%;">
		<z-paging ref="paging" :fixed="false" height="100%" v-model="dataList" @query="queryList"
			:loading-full-fixed="false" :auto-show-system-loading="true"
			bg-color="linear-gradient(360deg, #FFFFFF 31.23%, #E3EEFF 59.93%)">
			<view class="wrapper bg-color border-r-10 shadow1 flex-s-c m-b-12" v-for="(item,index) in dataList"
				:key="index" @click="toDetail(item.id,item.status)">
				<view><van-image width="100" height="100" :src="item.image_text" /></view>
				<view class="flex p-l-20">
					<view class="flex-b-c p-b-10">
						<view><text class="t-18 t-bold">{{item.name}}</text></view>
						<view :class="`${item.status == 1 ? 'shop-status' : 'shop-status2'} t-12 color5`">
							{{item.status == 1 ? '营业中':'休息中'}}
						</view>
					</view>
					<view class="t-14 color4">
						<text>{{item.description}}</text>
					</view>
					<view class="flex-s-c t-12 delivery-cost">
						<view><text>配送费￥{{item.fee}}</text></view>
						<view class="p-l-12"><text>起送￥{{item.start}}</text></view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		getShopList
	} from '@/api/index.js'
	const dataList = ref([]);
	const paging = ref(null)
	const queryList = async (pageNo, pageSize) => {
		getShopList({
			depid: uni.getStorageSync('school_id'),
			pageNo,
			pageSize
		}).then(res => {
			// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
			paging.value.complete(res.data.data);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}

	const toDetail = (id,status) => {
		if(status==1){
			uni.navigateTo({
				url: `/package/pages/shop/shop?shopId=${id}`
			})
		}else{
			uni.showToast({
				title: '超市在休息',
				duration: 2000
			});
		}
		
	}

	onLoad(() => {

	})
</script>

<style scoped>
	.shop-status {
		padding: 10rpx 25rpx;
		background-color: #f89812;
		border-radius: 10rpx;
	}

	.shop-status2 {
		padding: 10rpx 25rpx;
		background-color: #dddddd;
		border-radius: 10rpx;
	}

	.delivery-cost {
		padding-top: 40rpx;
	}
</style>